<template>
	<view class="page">
		<view class="code-get" v-if="!isSetting">
			<view class="phone">
				<text>请输入<text>{{tphone}}</text>短信验证码</text>
			</view>
			<view class="code">
				<input type="tel"  v-model="code" maxlength="6" placeholder="请输入短信验证码">
				<text @click="sendcode">获取验证码</text>
			</view>
			<view class="btn" >
				<text  @click="checkcode">下一步</text>
			</view>
		</view>
		<view class="code-get" v-else>
			<view class="phone">
				<input type="tel" v-model="newPhone" maxlength="11" placeholder="请输入新的手机号"/>
			</view>
			<view class="code">
				<input type="code"  v-model="code"  maxlength="6" placeholder="请输入短信验证码">
				<text @click="sendcodeNew">获取验证码</text>
			</view>
			<view class="btn"  >
				<text @click="updatePhone" >完成</text>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '../api/user.js'
	export default {
		data() {
			return {
				isSetting: false,
				phone:'',
				tphone:'',
				type:"4",
				code:"",
				newPhone:'',
			};
		}, 
	methods:{
		checkcode(){  
			 user.checkcode({
			 	  	 phone: this.phone,
			 	  	 type: this.type,
					 code: Number(this.code) 
			 }).then(res=>{
			 	  				 if(res.code==1)
								 {
									 this.isSetting = true 
								 }else{
									  uni.showToast({
			 	  				        title: res.message,
			 	  				        icon: 'success',
			 	  				        duration: 1500 // 提示框显示的时间，单位为毫秒，默认 1500
			 	  				       });
						 
								 }
			 	  				 
			 });
		},
		updatePhone(){
			console.log("点击了更新按钮")
				 user.checkcode({
				 	  	 phone: this.newPhone,
				 	  	 type: this.type,
						 code: Number(this.code) 
				 }).then(res=>{
					 console.log(res)
					              //新手机号验证码验证成功后修改
				 	  				 if(res.code==1)
									 { 
								 user.userUpdate({
								 	  			phone: this.newPhone, 
								 }).then(res=>{ 
								 	              uni.showToast({
								 				       title: res.message,
								 				       icon: 'success',
								 				       duration: 1500 // 提示框显示的时间，单位为毫秒，默认 1500
								 				      });
								 				
								 					  
								 });	
									 }else{
										  uni.showToast({
				 	  				        title: res.message,
				 	  				        icon: 'success',
				 	  				        duration: 1500 // 提示框显示的时间，单位为毫秒，默认 1500
				 	  				       });
							 
									 }
				 	  				 
				 });
			

		},
		 
		
		 
		sendcode(){
			const token = uni.getStorageSync('token');
			if (token) { 
			   	user.sendCode({
				  				  phone: this.phone,
				  				  type: this.type, 
			}).then(res=>{ 
				  				  uni.showToast({
				  				        title: res.message,
				  				        icon: 'success',
				  				        duration: 1500 // 提示框显示的时间，单位为毫秒，默认 1500
				  				       });
			}); 
			}  
		
		 
		},
		sendcodeNew(){
			const token = uni.getStorageSync('token');
			if (token) { 
			   	user.sendCode({
				  				  phone: this.newPhone,
				  				  type: this.type, 
			}).then(res=>{ 
				  				  uni.showToast({
				  				        title: res.message,
				  				        icon: 'success',
				  				        duration: 1500 // 提示框显示的时间，单位为毫秒，默认 1500
				  				       });
			}); 
			}  
		
		 
		},
	},
	onShow() {
	     const token = uni.getStorageSync('token'); 
	     if (token) { 
	         const userInfo = uni.getStorageSync('usernfo'); 
	         if (userInfo) {
				 this.phone=userInfo.phone;
				 var aa = userInfo.phone;
				 const start = aa.substring(0, 3);
				 const end = aa.substring(7);
				         // 中间部分用星号代替
				         const maskedPart = '****';
				         this.tphone = start + maskedPart + end;
	         }
	     }  
	},
	}
</script>

<style scoped lang="scss">
	@import 'ModifyPhone.scss';
</style>
 